<template>
  <view class="pt-20rpx">
    <wd-card custom-class="custom-card">
      <!-- 标题部分 -->
      <template #title>
        <view class="title-view">
          <wd-icon name="calendar" size="22px" />
          2024年6月(上月)
        </view>
      </template>

      <!-- 总工资和工资条按钮 -->
      <template #default>
        <view class="salary-overview">
          <view class="salary-text">
            4月总工资 <text class="salary-amount">￥3,000.00</text>
          </view>
          <wd-button size="small" :round="false" custom-class="salary-button">工资条</wd-button>
        </view>

        <!-- 评分和绩效工资部分 -->
        <view class="details-section">
          <view class="detail-item">
            <view class="detail-title">我的考核评分</view>
            <view class="detail-value score">95</view>
            <view class="detail-link">查看详情</view>
          </view>
          <view class="detail-divider" />
          <view class="detail-item">
            <view class="detail-title">绩效工资(元)</view>
            <view class="detail-value performance">1,500</view>
            <view class="detail-link">查看绩效</view>
          </view>
        </view>
      </template>
    </wd-card>
  </view>
</template>

<script setup lang="ts">
</script>

<style scoped>
/* 卡片样式 */
.custom-card {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 标题栏样式 */
.title-view {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 总工资部分样式 */
.salary-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f5ff;
  padding: 10px;
  border-radius: 8px;
  margin: 10px 0;
}

.salary-text {
  font-size: 16px;
  color: #222;
}

.salary-amount {
  color: #4a72f7;
  font-weight: bold;
  margin-left: 5px;
}

:deep(.salary-button) {
  border-radius: 8px !important;
  background: linear-gradient(to right, #519bfe, #4a72f7) !important;
}

/* 评分和绩效工资部分样式 */
.details-section {
  display: flex;
  align-items: center;
  margin-top: 10px;
  border-top: 1px solid #eee;
}

.detail-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}

.detail-divider {
  width: 1px;
  height: 40px;
  background-color: #eee;
}

.detail-title {
  font-size: 16px;
  color: #222222;
  font-weight: bold;
}

.detail-value {
  font-size: 22px;
  font-weight: bold;
  color: #ff4d4f;
}

.score {
  color: #ff4d4f;
}

.performance {
  color: #ff7c00;
}

.detail-link {
  font-size: 15px;
  margin-top: 5px;
  color: #4a72f7;
}
</style>
